<template>
  <div style="opacity: 95%;">
    <Row class="vm-login vm-panel">
      <Col span="10" class="login-form">
        <div class="login-header">
          <img src="@/assets/logo.png" height="200px" style="margin-top: -55px;margin-bottom: -45px">
          <p><span>PP</span>ALBUM</p>
        </div>
        <div class="login-form">
          <Input autofocus :maxlength="6" v-model.trim="loginForm.user_name" placeholder="please enter username"></Input>
          <Input :maxlength="8" v-model.trim="loginForm.pass_word" type="password" placeholder="Please enter password"></Input>
          <Button type="primary" @click="login('loginForm')">Login</Button>
        </div>
        <div class="login-footer">
          <a href="#">Forget Password</a>
          <span class="forget"><a href='regist'>Regist</a></span>
        </div>
      </Col>
      <Col span="14" class="login-ad"/>
    </Row>
  </div>
</template>

<script>
export default {
  name: 'login',
  data: function () {
    return {
      loginForm: {
        user_name: '',
        pass_word: ''
      }
    }
  },
  methods: {
    login() {
      const _this = this;
      this.axios.post(_this.API.http_login + 'login', _this.loginForm).then(function (resp) {
            if (resp.data) {
              const respData = JSON.parse(JSON.stringify(resp.data))
              if (respData.code === 200) {
                _this.FUN.successMessage(_this,respData.message);
                localStorage.setItem("user_name",_this.loginForm.user_name)
                localStorage.setItem("token",respData.data)
                localStorage.setItem("isLogin", "true")
                _this.CONST.isLogin = true
                _this.$router.push("/")
              } else {
                _this.FUN.errorMessage(_this,respData.message);
              }
            } else {
              return false;
            }
          }
      );
    }
  },
  created() {
    this.loginForm.user_name = this.$route.params.user_name;
    this.loginForm.pass_word = this.$route.params.pass_word;
  }
}
</script>
